﻿

@{
    ViewBag.Title = "EquipmentGroups";
    Layout = "~/Views/Shared/_LayoutForm.cshtml";
}
<div class="layui-row ">
    <form class="layui-form layui-form-pane ok-form">


        <div class="layui-input-inline">
            <label class="layui-form-label">IO条件</label>
        </div>
        <div class="layui-input-inline">
            <select name="ServerID" id="ServerID" placeholder="请选择采集站" lay-filter="ServerID" lay-verify="required"></select>
        </div>

        <div class="layui-input-inline">
            <select name="CommunicateID" id="CommunicateID" placeholder="请选择通道" lay-filter="CommunicateID" lay-verify="required"></select>
        </div>

        <div class="layui-input-inline">
                <input type="text" name="Key" id="Key" placeholder="关键字" autocomplete="off" class="layui-input">
         
        </div>

        <div class="layui-input-inline">

            <button class="layui-btn btn-default" lay-submit lay-filter="search">查询</button>

        </div>
    </form>
</div>
<fieldset class='layui-elem-field layui-field-title' style='margin-top: 10px;'>
    <legend><i class='layui-icon'  >&#xe67a;</i>结果列表</legend>
</fieldset>
<div class="site-demo-flow layui-bg-cyan" id="groupequipmentcontent">

</div>
<div class="layui-layer-page layui-row" id="pageer"></div>
 
<script>

    layui.use(["form", "okLayer", "okUtils", "flow", "util", "laypage", 'layer',"element"], function () {

        let form = layui.form;
        let okLayer = layui.okLayer;
        let okUtils = layui.okUtils;
        var element = layui.element;
 
        let laypage = layui.laypage;
        let $ = layui.$;
        GetStations();//获取采集站
        form.on('select(ServerID)', function (data) {
            GetCommunication();
        });

   

        function GetStations() {

            $("#ServerID").empty();
            $("#ServerID").append("<option value=''>请选择采集站</option>");
            //加载采集站类型
            $.get("/Scada/ScadaGeneral/GetStations", function (result) {

                for (var i = 0; i < result.data.length; i++) {

                    $("#ServerID").append("<option value='" + result.data[i].SERVER_ID + "'>" + result.data[i].SERVER_ID + "</option>");
                }

                layui.form.render("select");
                //重新渲染select
                form.render('select');
                GetCommunication();

            });
        }
        //采集站下的所有通道
        function GetCommunication() {

            $("#CommunicateID").empty();
            $("#CommunicateID").append("<option value=''>请选择通道</option>");
            //加载通道类型
            $.get("/Scada/ScadaGeneral/GetCommunications", { "serverid": $("#ServerID").val() }, function (result) {


                for (var i = 0; i < result.data.length; i++) {

                    $("#CommunicateID").append("<option value='" + result.data[i].IO_COMM_ID + "'>" + result.data[i].IO_COMM_LABEL + "[" + result.data[i].IO_COMM_LABEL + "]" + "</option>");
                }

                layui.form.render("select");
                //重新渲染select
                form.render('select');


            });
        }

        form.on("submit(search)", function (data) {
            getEquipmentList();
            return false;
        });


        var curr = 0;
        var limit = 10;
        var total = 0;
        InitPageTool();
        function InitPageTool() {
            //完整功能
            laypage.render({
                elem: 'pageer'
                , count: total
                , limit: limit
                , curr: curr
                , layout: ['count', 'prev', 'page', 'next', 'limit', 'refresh', 'skip', 'count']
                , jump: function (obj, first) {
                    //obj包含了当前分页的所有参数，比如：
                    curr = obj.curr;
                    limit = obj.limit;
                    //首次不执行

                    if (first) {
                        curr = 0;
                        limit = 10;
                    }
                    else {
                        getEquipmentList();
                    }

                }
            });
        };
        getEquipmentList();
        function getEquipmentList() {
            $.get("/Scada/ScadaGeneral/EquipmentList", { "key": $("#Key").val(), "serverid": $("#ServerID").val(), "communicateid": $("#CommunicateID").val(), "pageindex": curr, "pagesize": limit}, function (response) {

                total = response.count;
                InitPageTool();
                var content = $("#groupequipmentcontent");
                content.html("");//清空原来的内容
                var html = "";
                for (var i = 0; i < response.data.length; i++) {



                    html += ("<div class='layui-col-md3 layui-collapse ' lay-accordion style='padding: 5px;' lay-filter='realcard'> <div class='layui-colla-item' >");
                    html += ("   <div class='layui-colla-title' >");
                    html += ("  <div class='layui-btn-group'  style='padding-right: 10px;' >");

                    html += ("    <button type='button' class='layui-btn layui-btn-primary  layui-btn-sm' title='查看曲线'  onclick='modelrealserie(\"" + response.data[i].ModelTitle + "\",\"" + response.data[i].DeviceId + "\")'><i class='layui-icon'  style='color:blue' >&#xe630;</i></button>");//查看曲线
                    html += ("    <button type='button' class='layui-btn layui-btn-primary  layui-btn-sm' title='历史查询'  onclick='modelhistoryquery(\"" + response.data[i].ModelTitle + "\",\"" + response.data[i].DeviceId + "\")'><i class='layui-icon'  style='color:black' >&#xe62d;</i></button>");//历史查询
                    html += ("    <button type='button' class='layui-btn layui-btn-primary  layui-btn-sm' title='历史曲线'  onclick='modelhistoryserie(\"" + response.data[i].ModelTitle + "\",\"" + response.data[i].DeviceId + "\")'><i class='layui-icon'  style='color:yeelow' >&#xe629;</i></button>");//历史曲线
                    html += ("    <button type='button' class='layui-btn layui-btn-primary  layui-btn-sm' title='历史统计'  onclick='modelhistorysummaryquery(\"" + response.data[i].ModelTitle + "\",\"" + response.data[i].DeviceId + "\")'><i class='layui-icon'  style='color:red' >&#xe60a;</i></button>");//历史查询
                    html += ("    <button type='button' class='layui-btn layui-btn-primary  layui-btn-sm' title='历史统计曲线'  onclick='modelhistorysummaryserie(\"" + response.data[i].ModelTitle + "\",\"" + response.data[i].DeviceId + "\")'><i class='layui-icon'  style='color:blue' >&#xe60d;</i></button>");//历史曲线
                    html += ("   </div></div>");
                    html += ("   <div class='layui-colla-content  layui-show layui-bg-cyan' >");
                    html += (" <div   class='layui-form-item ' >");
                    html += ("  <fieldset class='layui-elem-field layui-field-title' style='margin-top: 10px;'>");
                    html += ("  <legend><i class='layui-icon'  style='color:yeelow' >&#xe67a;</i>" + response.data[i].ModelTitle + "</legend>");
                    html += ("</fieldset>");
                    html += ("</div>");
                    var paranum = 0;
                    if (response.data[i].Paras.length >= 6) {
                        paranum = 6;
                    }
                    else {
                        paranum = response.data[i].Paras.length;
                    }

                    for (var e = 0; e < paranum; e++) {
                        html += (" <div   class='layui-form-item '  style='fontsize:15;' data-scadafilter='ioelement' data-iopath='" + response.data[i].ServerId + "/" + response.data[i].CommunicationId + "/" + response.data[i].DeviceId + "/" + response.data[i].Paras[e].ParaId + "/" + response.data[i].Paras[e].ParaName + "'>");//增加一个设备数量的说明
                        html += ("<div class='layui-input-inline' style='width:22%;' data-scadafilter='iotitle'><i class='layui-icon ' style='color:red' >&#xe62c;</i>&nbsp;" + response.data[i].Paras[e].ParaTitle + "</div>");
                        html += ("<div class='layui-input-inline' style='width:20%;color:@Scada.DBUtility.WebSerieColor.GetColor(4);' data-scadafilter='iovalue'>0</div>");
                        html += ("<div class='layui-input-inline' style='width:10%;color:@Scada.DBUtility.WebSerieColor.GetColor(23);' data-scadafilter='iounit'>" + response.data[i].Paras[e].ParaUnit + "</div>");
                        html += ("<div class='layui-input-inline' style='width:38%;color:@Scada.DBUtility.WebSerieColor.GetColor(43);'   data-scadafilter='iotime'>1970-01-01 00:00:00</div>");
                        if (response.data[i].Paras[e].CanWrite == 1) {
                            html += ("<div class='layui-input-inline' style='width:5%;'> <button type='button' class='layui-btn layui-btn-primary  layui-btn-sm' title='写入命令'><i class='layui-icon'  style='color:red' >&#xe629;</i></button></div>");
                        }
                        html += ("</div>");
                    }
                    if (response.data[i].Paras.length >= 6) {
                        html += ("    <div class='layui-collapse' lay-filter='test'>");
                        html += ("        <div class='layui-colla-item'>");
                        html += ("            <h2 class='layui-colla-title'>更多.....</h2>");
                        html += ("            <div class='layui-colla-content' style='height:300px;overflow:auto;'>");
                        for (var e = 6; e < response.data[i].Paras.length; e++) {
                       
                            //********************************************
                            html += (" <div   class='layui-form-item '  style='fontsize:15;' data-scadafilter='ioelement' data-iopath='" + response.data[i].ServerId + "/" + response.data[i].CommunicationId + "/" + response.data[i].DeviceId + "/" + response.data[i].Paras[e].ParaId + "/" + response.data[i].Paras[e].ParaName + "'>");//增加一个设备数量的说明
                            html += ("<div class='layui-input-inline' style='width:22%;' data-scadafilter='iotitle'><i class='layui-icon ' style='color:red' >&#xe62c;</i>&nbsp;" + response.data[i].Paras[e].ParaTitle + "</div>");
                            html += ("<div class='layui-input-inline' style='width:20%;color:@Scada.DBUtility.WebSerieColor.GetColor(4);' data-scadafilter='iovalue'>0</div>");
                            html += ("<div class='layui-input-inline' style='width:10%;color:@Scada.DBUtility.WebSerieColor.GetColor(23);' data-scadafilter='iounit'>" + response.data[i].Paras[e].ParaUnit + "</div>");
                            html += ("<div class='layui-input-inline' style='width:38%;color:@Scada.DBUtility.WebSerieColor.GetColor(43);'   data-scadafilter='iotime'>1970-01-01 00:00:00</div>");
                            if (response.data[i].Paras[e].CanWrite == 1) {
                               // html += ("<div class='layui-input-inline' style='width:5%;'> <button type='button' class='layui-btn layui-btn-primary  layui-btn-sm' title='写入命令'><i class='layui-icon'  style='color:red' >&#xe629;</i>写入</button></div>");
                            }
                            html += ("</div>");
                            //********************************************
                      
                        }
                        html += ("           </div>");
                        html += ("        </div>");
                        html += ("    </div>");
                    }



                    html += (" <div class='layui-form-item'>");//增加一个设备数量的说明
                  
                    html += ("   </div>");

                    html += ("  </div>");
                    html += ("   </div>");
                    html += ("  </div>");
                    html += ("  </div>");


                }
                content.html(html);
                element.render("collapse");

            });
        }

        //**************************************************//
        window.modelrealserie = function (title, modelid) {
            okLayer.open(title + "实时曲线", "/Scada/ScadaGeneral/GeneralEquipmentRealSerie/" + modelid, "90%", "90%", null, null);

        }
        window.modelhistoryquery = function (title, modelid) {
            okLayer.open(title + "历史数据查询", "/Scada/ScadaGeneral/GeneralEquipmentHistoryQuery/" + modelid, "90%", "90%", null, null);

        }
        window.modelhistoryserie = function (title, modelid) {
            okLayer.open(title + "历史曲线", "/Scada/ScadaGeneral/GeneralEquipmentHistorySerie/" + modelid, "90%", "90%", null, null);

        }
        window.modelhistorysummaryquery = function (title, modelid) {
            okLayer.open(title + "历史数据统计查询", "/Scada/ScadaGeneral/GeneralEquipmentHistorySummaryQuery/" + modelid, "90%", "90%", null, null);

        }
        window.modelhistorysummaryserie = function (title, modelid) {
            okLayer.open(title + "历史统计曲线", "/Scada/ScadaGeneral/GeneralEquipmentHistorySummarySerie/" + modelid, "90%", "90%", null, null);

        }
        var refreshtime = "3s";//秒
        function ReadRealData(){
            var modelelements = $("[data-scadafilter='ioelement']");//获取所有要显示事件信息的图元
            var IoParas = [];
            for (var i = 0; i < modelelements.length; i++) {

                var parastr =$( modelelements[i]).data("iopath");
                if (parastr != undefined && parastr.trim() != "") {
                    IoParas.push({ ShapeID: modelelements[i].id, ServerID: parastr.split('/')[0], CommunicateID: parastr.split('/')[1], DeviceID: parastr.split('/')[2], ParaID: parastr.split('/')[3], IoName: parastr.split('/')[4] });
                }

            }
            try {
                //获取实时数据

                $.post("/Scada/ScadaEquipment/GetReadData", { IoParas }, function (result) {
                
                    return new Promise(resolve => {
                        $.each(result.data, function (index, value) {
                        setTimeout(function () {
                      
                            var valueeles = $("div[data-iopath='" + value.IOEquipmentStr + "']");
                            if (valueeles != undefined) {
                                for (var n = 0; n < valueeles.length; n++) {

                                    var valueele = $("div[data-iopath='" + value.IOEquipmentStr + "']>div[data-scadafilter='iovalue']");
                                    var timeele = $("div[data-iopath='" + value.IOEquipmentStr + "']>div[data-scadafilter='iotime']");


                                    if (valueele != undefined && valueele.length > 0) {
                                        valueele.html(value.Value);
                                        valueele.text(value.Value);

                                    }
                                    if (timeele != undefined && timeele.length > 0) {
                                        timeele.text(value.DateTime);
                                    }
                                }

                            }
                      
                        }, 0);
                        });
                    
                    });
                
                });

            }
            catch (e) {

            }


        }
        function StartReader() {
            //设置定时器实时读取数据
            try {
                $('body').everyTime(refreshtime, function () {
                    ReadRealData();
                
                });
            } catch (e) { }
        }
        StartReader();

    });

</script>

